<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center dengLu_flex_0"
				:style="{ height: (0 + StatusBarRpx) + 'rpx', paddingTop: StatusBarRpx + 'rpx', }">
			</view>
			<view :style="{ height: (0 + StatusBarRpx) + 'rpx' }"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
				<image class='self-center dengLu_fd1_0' mode="aspectFit" :src='STATIC_URL + "3.png"'></image>
				<view class='flex flex-direction flex-wrap align-stretch dengLu_fd1_1'
					style="padding-left: 0;padding-right: 0;">
					<view class="flex flex-direction flex-wrap align-stretch dengLu_fd1_1" style="margin: 0 auto;">
						<text class='dengLu_fd1_1_c0'>欢迎登录水资源智慧管控平台</text>
						<view class='dengLu_fd1_1_c1' style="display: flex;align-items: center;">
							<image class='dengLu_fd1_1_c1_c0' mode="aspectFit" src='/static/images/5.png'></image>
							<input type="number" :placeholder="`请输入手机号`" confirm-type="done" :maxlength="11"
								placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx"
								v-model="loginForm.userName" />
						</view>
						<view class='dengLu_fd1_1_c2' style="display: flex;align-items: center;">
							<image class='dengLu_fd1_1_c1_c0' mode="aspectFit" src='/static/images/6.png'></image>
							<input type="password" :placeholder="`请输入密码`" confirm-type="done" :maxlength="11"
								placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx"
								v-model="loginForm.passWord" />
						</view>
						<view class='flex flex-wrap align-center dengLu_fd1_1_c3'>
							<button class='dengLu_fd1_1_c3_c0' @tap.stop="loginVerificationFunc()">登录</button>
						</view>
					</view>
				</view>
			</view>
			<!---flex布局flex布局结束-->
		</view>
	</view>
</template>
<script>
import { loginApi } from "@/axios/login/login.js"
export default {
	components: {},
	data() {
		return {
			loginForm: {
				userName: "18810603566",
				passWord: "Mmkj2024"
			},
			// "userName": "",
			// "passWord": "",
			"check": false
		};
	},
	computed: {
		themeColor() {
			// return this.$store.getters.themeColor
		},

	},
	watch: {},
	onLoad(options) {

	},
	onUnload() {

	},
	onReady() {
		this.loginForm.userName = uni.getStorageSync('phone') || ''
		this.loginForm.passWord = uni.getStorageSync('passWord') || 'Mmkj2024'

	},
	onShow() {

	},
	onHide() {

	},
	onResize() {

	},
	onPullDownRefresh() {

	},
	onReachBottom(e) {

	},
	onPageScroll(e) {

	},
	methods: {
		// 手机号码验证
		isValidStrictChineseMobile(userName) {
			const regex = /^((\+86)|(86))?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/;
			return regex.test(userName);
		},
		//登录校验
		async loginVerificationFunc() {
			if (this.isValidStrictChineseMobile(this.loginForm.userName) && this.loginForm.passWord) {
				let res = await loginApi(this.loginForm)
				if(res.code == 0){
					uni.setStorageSync('phone', this.loginForm.userName);
					uni.setStorageSync('passWord', this.loginForm.passWord);
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/homePage/homePage"
						})
					}, 1000);
				}
			} else {
				uni.showToast({
					title: '请输入正确格式手机号码',
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	width: 100vw;
	overflow-x: hidden;
	min-height: calc(100vh - var(--window-bottom));
	background: url(/static/images/1.png) no-repeat;
	background-size: 100% auto;
}

.dengLu_flex_0 {
	width: 750rpx;
	overflow: hidden;
	z-index: 10;
	top: 0rpx;
	height: 0rpx;
}

.dengLu_fd1_1_c4_c4 {
	color: rgba(41, 120, 252, 1);
	font-size: 22rpx;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	max-width: 200rpx;
}

.dengLu_fd1_1_c4_c3 {
	font-size: 22rpx;
	color: rgba(153, 153, 153, 1);
}

.dengLu_fd1_1_c4_c2 {
	font-size: 22rpx;
	color: rgba(41, 120, 252, 1);
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.dengLu_fd1_1_c4_c1 {
	color: rgba(153, 153, 153, 1);
	font-size: 22rpx;
	// -webkit-line-clamp: 1;
	// overflow: hidden;
	// text-overflow: ellipsis;
	// display: -webkit-box;
	// -webkit-box-orient: vertical;
	// max-width: 200rpx;
}

.dengLu_noCheckfd1_1_c4_c0_c1_c0 {
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	width: 31rpx;
	height: 31rpx;
}

.dengLu_checkfd1_1_c4_c0_c0_c0 {
	width: 31rpx;
	height: 31rpx;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}

::v-deep .dengLu_fd1_1_c4_c0 {
	margin: 0rpx 24rpx 0rpx 0rpx;
}

.dengLu_fd1_1_c3_c0 {
	background: #2978FC;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	width: 592rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	color: #fff;
	height: 88rpx;
}

.dengLu_fd1_1_c3 {
	margin: 0rpx 0rpx 132rpx 0rpx;
}

.dengLu_fd1_1_c2_c1_icon2 {
	width: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-size: 40rpx;
	margin: 0rpx 37rpx 0rpx 0rpx;
}

.dengLu_fd1_1_c2_c1_icon1 {
	text-align: center;
	font-size: 40rpx;
	margin: 0rpx 37rpx 0rpx 0rpx;
}

::v-deep .dengLu_fd1_1_c2_c1 {
	font-size: 28rpx;
	width: 485rpx;
}

.dengLu_fd1_1_c2 {
	border: 1px solid #2978FC;
	background: #FFFFFF;
	border-radius: 45rpx 45rpx 45rpx 45rpx;
	width: 592rpx;
	height: 90rpx;
	margin: 0rpx 0rpx 111rpx 0rpx;
}

.dengLu_fd1_1_c1_c0 {
	width: 40rpx;
	height: 40rpx;
	margin: 25rpx 31rpx 25rpx 36rpx;
}

.dengLu_fd1_1_c1 {
	border: 1px solid #2978FC;
	background: #FFFFFF;
	border-radius: 45rpx 45rpx 45rpx 45rpx;
	width: 592rpx;
	height: 90rpx;
	margin: 0rpx 0rpx 39rpx 0rpx;
}

.dengLu_fd1_1_c0 {
	color: #333333;
	font-size: 32rpx;
	font-weight: 700;
	margin: 0rpx 70rpx 71rpx 70rpx;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	max-width: 448rpx;
	text-align: center;
}

.dengLu_fd1_1 {
	background: rgba(255, 255, 255, 1);
	margin: 0rpx 32rpx 160rpx 32rpx;
	background-size: 100% auto;
	padding: 70rpx 47rpx 46rpx 47rpx;
	font-size: 28rpx;
	border-radius: 16rpx;
}

.dengLu_fd1_0 {
	width: 164rpx;
	height: 164rpx;
	margin: 91rpx 292rpx 45rpx 294rpx;
}
</style>